<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/coupon_list.css" />
    <title>优惠券</title>
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
</head>
<body>
    <div class="coupon_tabs">
        <ul>
            <li class="active">全部</li>
            <li>未使用</li>
            <li>已使用</li>
            <li>未生效</li>
            <li>已失效</li>
        </ul>
    </div>

    <div id="box" class="mescroll">
        <div class="coupon_list">
        </div>
    </div>
</body>
</html>
<script>
    option = 0
    $('ul li').click(function()
    {
        $(this).parent().children().prop('class','')
        $(this).prop('class','active')
        $(this).parent().children().each((i,element) => {
            if(element==this)option=i
        });
        downCallback()
    })
    coupon = []
    function getCoupon(event,id){
        if(coupon.includes(id)){
            return;
        }else{
            coupon.push(id)
        }
        $.post('/home/discount/getCoupon',{id})
        .then((data)=>{
            if(data.code){
                $(event.target).removeClass('mui-btn-warning')
                $(event.target).css('cursor','not-allowed')
                $(event.target).text('已领取')
            }
            mui.toast(data.msg, {duration: 3000})
        },(jqXhR)=>{
            console.log(jqXhR.responseText())
        })
    }

    var mescroll = new MeScroll("box", {
        down: {
            callback: downCallback
        },
        up: {
            callback: upCallback,
            isBounce: false, 
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 5 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5,
            toTop: {
                src: "/assets/home/plugin/mescroll/mescroll-totop.png",
                offset: 100,
                duration: 300,
                supportTap : true,
            },
            empty: {
                warpId:	"box",
                tip: "暂无相关数据~"
            },
        }
    });

    function downCallback() {
        $('#box .coupon_list').empty()
        mescroll.resetUpScroll()
    }

    function upCallback(page) 
    {
        $('.mescroll-totop').css('bottom','70px')
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.post('/home/discount/coupon_list',{pageNum,pageSize,option})
        .then((data)=>{
            var curPageData = data.curPageData; // 接口返回的当前页数据列表
            var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            mescroll.endByPage(curPageData.length, totalPage);
            
            if(page.num == 1) $('#box .coupon_list').empty() // 第一页,先置空,再追加
            setListData(curPageData);
        },
        (e)=>{
            mescroll.endErr();
        })
    }

    function setListData(curPageData){
        html = ''
        for(var [i,coupon] of curPageData.entries()){
            // console.log(coupon.id,coupon.status.code?(coupon.statusTime.msg):(coupon.status.msg))
            html += `<div class="coupon_item wow" data-wow-delay="100ms">
            <div class="item_content">
                <a href="/home/discount/coupon_info?id=${coupon.id}">
                    <div class="left">
                        ${coupon.rate*100}<span>折</span>
                    </div>
                    <div class="right">
                        <div>${coupon.title}</div>
                        <div>活动开始时间：${coupon.createDate}</div>
                        <div>活动结束时间：${coupon.endDate}</div>
                        <div>领取数量：${coupon.total} 张 每人限领1张</div>
                    </div>
                </a>
            </div>
            <div class="item_btn">
                ${coupon.status.code&&coupon.statusTime.code?
                "<a class='mui-btn mui-btn-warning' onclick='getCoupon(event,"+coupon.id+")'>"+coupon.status.msg+"</a>":
                "<a class='mui-btn' style='cursor: not-allowed;'>"+(coupon.status.code?(coupon.statusTime.msg):(coupon.status.msg))+"</a>"}
            </div>  
        </div>`
        }
        $('#box .coupon_list').append(html)
    }
    

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>